<template>
  <div :class="`advanced-linkage-editor-main ${visualThemeClassName}`">
    <el-button
      v-show="linkageDatas.length === 0"
      type="primary"
      icon="Plus"
      size="default"
      @click="addLinkageItem"
    >{{ $demoi18n('btn.addNew') }}</el-button>
    <table
      v-if="linkageDatas.length"
      class="main_table"
    >
      <tr>
        <th width="40">{{ $demoi18n('word.serialNumber') }}</th>
        <th>{{ $demoi18n('common.advanced-linkage.condition') }}</th>
        <th style="min-width:120px">{{ $demoi18n('word.link') }}</th>
        <th>{{ $demoi18n('common.advanced-linkage.withParameters') }}</th>
        <th width="40">
          <el-button
            :link="true"
            type="primary"
            icon="Plus"
            size="default"
            @click="addLinkageItem"
          ></el-button>
        </th>
      </tr>
      <tr
        v-for="(n, i) in linkageDatas"
        :key="i"
      >
        <td>{{ i + 1 }}</td>

        <!-- 条件 -->
        <td>
          <el-button
            v-show="n.conditions.length === 0"
            type="primary"
            icon="Plus"
            size="default"
            @click="addCondition(n)"
          >{{ $demoi18n('btn.addNew') }}</el-button>
          <table
            v-if="n.conditions.length"
            class="conditions_table"
          >
            <tr>
              <th>
                {{ $demoi18n('word.field') }}
                <Helptip style="vertical-align: middle;">{{ $demoi18n('panelEvent.label.formulaTip') }}</Helptip>
              </th>
              <th>{{ $demoi18n('word.value') }}</th>
              <th width="20">
                <el-button
                  :link="true"
                  type="primary"
                  icon="Plus"
                  size="default"
                  @click="addCondition(n)"
                ></el-button>
              </th>
            </tr>
            <tr
              v-for="(n1, i1) in n.conditions"
              :key="i1"
            >
              <td>
                <ValueInputer
                  v-model:value="n1.srcField"
                  value-type="List"
                  :enum-values="srcFieldEnumValsWithFormula"
                  required
                />
              </td>
              <td>
                <el-input
                  v-model="n1.value"
                  size="default"
                ></el-input>
              </td>
              <td>
                <el-button
                  :link="true"
                  type="primary"
                  icon="Delete"
                  size="default"
                  @click="delItem(n.conditions, i1)"
                ></el-button>
              </td>
            </tr>
          </table>
        </td>

        <!-- 链接 -->
        <td class="linkConf_box_td">
          <div class="switch">{{ $demoi18n('word.link') }}: <el-switch v-model="n.hasLink" size="small"></el-switch></div>
          <JumpurlSettingForm v-if="n.hasLink" :form="n.linkConf" :fields="srcFieldEnumVals" />
        </td>

        <!-- 带参 -->
        <td>
          <div>
            <el-button
              v-show="n.events.length === 0"
              type="primary"
              size="default"
              icon="Plus"
              @click="addEvent(n)"
            >{{ $demoi18n('btn.addNew') }}</el-button>
          </div>
          <table
            v-show="n.events.length"
            class="events_table"
          >
            <tr>
              <th>{{ $demoi18n('panelEvent.label.issueEvent') }}</th>
              <th>{{ $demoi18n('word.parameter') }}</th>
              <th width="20">
                <el-button
                  :link="true"
                  type="primary"
                  icon="Plus"
                  size="default"
                  @click="addEvent(n)"
                ></el-button>
              </th>
            </tr>
            <tr
              v-for="(ev, i1) in n.events"
              :key="i1"
            >
              <td>
                <ValueInputer
                  v-model:value="ev.evtKey"
                  valueType="Input"
                  required
                />
              </td>
              <td class="params_box_td">
                <el-button
                  v-show="ev.params.length === 0"
                  type="primary"
                  icon="Plus"
                  size="default"
                  @click="addEventParam(ev)"
                >{{ $demoi18n('btn.addNew') }}</el-button>
                <table
                  v-show="ev.params.length"
                  class="params_table"
                >
                  <tr>
                    <th>{{ $demoi18n('common.eventKey') }}</th>
                    <th width="80">{{ $demoi18n('word.sources') }}</th>
                    <th>
                      {{ $demoi18n('common.advanced-linkage.fieldInputValue') }}
                      <Helptip :width="400">{{ $demoi18n('advancedLinkage.varTip') }}</Helptip>
                    </th>
                    <th width="20">
                      <el-button
                        :link="true"
                        type="primary"
                        icon="Plus"
                        size="default"
                        @click="addEventParam(ev)"
                      ></el-button>
                    </th>
                  </tr>
                  <tr
                    v-for="(param, i2) in ev.params"
                    :key="i2"
                  >
                    <td>
                      <ValueInputer
                        v-model:value="param.evtParameterKey"
                        valueType="Input"
                        required
                      />
                    </td>
                    <td>
                      <ValueInputer v-model:value="param.equalTo" valueType="List" :enumValues="equalTypes" required />
                    </td>
                    <td>
                      <ValueInputer
                        v-if="param.equalTo === 'srcField'"
                        v-model:value="param.srcField"
                        value-type="List"
                        :enum-values="srcFieldEnumVals"
                        required
                      />
                      <ValueInputer v-if="param.equalTo === 'event'" v-model:value="param.event" required />
                      <ValueInputer v-if="param.equalTo === 'url'" v-model:value="param.urlKey" required />
                      <ValueInputer v-if="param.equalTo === 'inputVal'" v-model:value="param.inputVal" required />
                    </td>
                    <td>
                      <el-button
                        :link="true"
                        type="primary"
                        icon="Delete"
                        size="default"
                        @click="delItem(ev.params, i2)"
                      ></el-button>
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <el-button
                  :link="true"
                  type="primary"
                  icon="Delete"
                  size="default"
                  @click="delItem(n.events, i1)"
                ></el-button>
              </td>
            </tr>
          </table>
        </td>

        <!-- 操作 -->
        <td>
          <el-button
            :link="true"
            type="primary"
            icon="Delete"
            size="default"
            @click="delItem(linkageDatas, i)"
          ></el-button>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import JumpurlSettingForm from '@/components/common/jumpurl-setting/jumpurl-setting-form.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import { mapState } from 'vuex';
import Helptip from '@/components/common/helptip/helptip.vue';

const linkageItem = {
  conditions: [{ srcField: '', value: '' }],
  hasLink: false,
  linkConf: {
    linkType: 'page', // link | page
    jumpUrl: '',
    siteId: '',
    directoryId: '',
    pageId: '',
    isOpenNewPage: true,
  },
  events: [
    {
      evtKey: '',
      params: [
        {
          evtParameterKey: '',
          srcField: '', // 可下拉选择字段
          event: '',
          urlKey: '',
          inputVal: '', // 输入值
          equalTo: 'srcField', // srcField | inputVal 使用字段挂钩还是输入值
        },
      ],
    },
  ],
};

export default {
  components: { JumpurlSettingForm, ValueInputer, Helptip },
  inject: {
    panelWid: {
      default: '',
    },
  },
  props: {
    linkageDatas: {
      type: Array,
      default: () => [],
    },
    config: Object,
  },
  data() {
    return {
      equalTypes: [
        { label: this.$demoi18n('word.field'), value: 'srcField' },
        { label: this.$demoi18n('word.event'), value: 'event' },
        { label: this.$demoi18n('advLinage.urlParameter'), value: 'url' },
        { label: this.$demoi18n('placeholder.inputValue'), value: 'inputVal' },
      ],
    };
  },
  computed: {
    ...mapState({
      panelConfigs: state => state.VisualComponentsModule.panelConfigs,
    }),
    panelSrcFields() {
      const { data = {} } = this.panelConfigs[this.panelWid] || {};
      let { tableData = [] } = data;
      const { table } = data;

      // 左表右xx
      if (table && table.tableData) {
        tableData = table.tableData;
      }

      const srcFields = {};
      tableData.forEach(n => {
        srcFields[n.field] = n.field;
      });
      return srcFields;
    },

    srcFields() {
      const { advancedLinkage = {} } = this.config;
      if (advancedLinkage.srcFields) {
        return advancedLinkage.srcFields;
      }

      return this.panelSrcFields;
    },
    srcFieldEnumVals() {
      const arr = [];
      Object.entries(this.srcFields).map(([i]) => {
        arr.push({
          label: i,
          value: this.srcFields[i],
        });
      });
      return arr;
    },
    srcFieldEnumValsWithFormula() {
      return [
        ...this.srcFieldEnumVals,
        {
          label: this.$demoi18n('common.advanced-linkage.formula'),
          value: '_formula',
        },
      ];
    },
  },
  watch: {},
  methods: {
    addLinkageItem() {
      const item = JSON.parse(JSON.stringify(linkageItem));
      item.conditions = [];
      item.events = [];
      this.linkageDatas.push(item);
    },
    addCondition(linkage) {
      let item = JSON.parse(JSON.stringify(linkageItem));
      item = item.conditions[0];
      linkage.conditions.push(item);
    },
    addEvent(linkage) {
      let item = JSON.parse(JSON.stringify(linkageItem));
      item = item.events[0];
      linkage.events.push(item);
    },
    addEventParam(ev) {
      let item = JSON.parse(JSON.stringify(linkageItem));
      item = item.events[0].params[0];
      ev.params.push(item);
    },
    delItem(items, index) {
      items.splice(index, 1);
    },
  },
};
</script>
<style lang="less" scoped>
.advanced-linkage-editor-main {
  table {
    border-collapse: collapse;
    th,
    td {
      text-align: center;
    }
    th {
      font-weight: normal;
    }
  }
  .main_table {
    width: 100%;
    > tr > td {
      padding: 10px;
    }
  }
  .conditions_table {
    th,
    td {
      border: none;
    }
    th {
      background-color: transparent;
    }
  }
  .events_table {
    th {
      background-color: transparent;
    }
    td {
      padding: 10px;
    }
  }
  .linkConf_box_td {
    text-align: left;
    .switch{
      margin-left: 10px;
    }
    .jumpurl-setting-form {
      min-width: 240px;
    }
  }
  .params_box_td {
  }
  .params_table {
    th,
    td {
      border: none;
    }
    th {
      background-color: transparent;
    }
    td {
      padding: 0;
    }
  }
  .isOpenNewPage {
    text-align: left;
    margin-top: 10px;
  }

  :deep(.el-input__inner) {
    padding: 0 5px;
  }
  &.visualComponents_theme_light {
    .main_table {
      > tr > th,
      > tr > td {
        border: 1px solid #888;
      }
      > tr > th {
        background-color: #d9ecff;
      }
    }
    .events_table {
      > tr > th,
      > tr > td {
        border: 1px solid #dedede;
      }
    }
  }

  &.visualComponents_theme_dark {
    .main_table {
      > tr > th,
      > tr > td {
        border: 1px solid #588ba8;
      }
      > tr > th {
        background-color: #225a89;
      }
    }
    .events_table {
      > tr > th,
      > tr > td {
        border: 1px solid #064559;
      }
    }
  }
}
</style>
